<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Elevator navigation</title>
    <link rel="stylesheet" href="./style.css" type="text/css" />
  </head>
  <body>
    <nav>
      <a href="#t1" style="--s: --t1">一、标题一</a>
      <a href="#t2" style="--s: --t2">二、标题二</a>
      <a href="#t3" style="--s: --t3">三、标题三</a>
      <a href="#t4" style="--s: --t4">四、标题四</a>
      <a href="#t5" style="--s: --t5">五、标题五</a>
      <a href="#t6" style="--s: --t6">六、标题六</a>
    </nav>
    <h1>CSS 电梯导航</h1>
    <section class="content" style="--s: --t1">
      <h2 id="t1">一、标题一</h2>
      <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </section>
    <section class="content" style="--s: --t2">
      <h2 id="t2">二、标题二</h2>
      <div class="block">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </section>

    <section class="content" style="--s: --t3">
      <h2 id="t3">三、标题三</h2>
      <div class="block">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </section>
    <section class="content" style="--s: --t4">
      <h2 id="t4">四、标题四</h2>
      <div class="block">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </section>
    <section class="content" style="--s: --t5">
      <h2 id="t5">五、标题五</h2>
      <div class="block">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </section>
    <section class="content" style="--s: --t6">
      <h2 id="t6">六、标题六</h2>
      <div class="block">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </section>
    <div class="wrapper">
      <div class="ball"></div>
      <div class="square"></div>
    </div>
  </body>
</html>
